<template>
  <div class="about">
    <my-header>
      <template v-slot:title>
        <div>许愿墙</div>
      </template>
    </my-header>
    <plinput placeholder="请输入愿望" v-model="text" :intext="text" />
    <myimg :imglist="imglist" @srcinit="srcinit" :tapindex="tapindex" />
    <button class="button" :disabled="disabled" :class="{color:disabled}" @click="add">{{butttext}}</button>
    <div
      @click="xgai(item,i)"
      @touchend="touchend"
      @touchmove="touchmove(i,$event)"
      @touchstart="touchstart(item,$event)"
      v-for="(item,i) in dreams"
      :key="i"
      :style="{
      backgroundImage:`url(${item.src})`,
      top:item.top+'px',
      left:item.left+'px',
    }"
      class="box"
    >
      <span @click.stop="del(i)">X</span>
      {{item.text}}
    </div>
  </div>
</template>

<script>
import myHeader from "../components/myHeader/myHeader.vue";
import plinput from "../components/my-Input/plinput.vue";
import Myimg from "../components/myimg/myimg.vue";
export default {
  components: { myHeader, plinput, Myimg },
  data() {
    return {
      imglist: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2Fil%2F3g%2FQJ8552161866.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627443048&t=6afdcdc88e9401f9ac4158edf1a36824",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01816258886a2fa8012060c8c3a678.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627443048&t=e517cf5afb4b38ad0a9a811dbfcbcc54",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20191103%2F15%2F1572766209-pwzoKhXOdS.jpeg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627443048&t=7fd9e447271054881c1deafa57349732",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190705%2F22%2F1562337454-lFsBekdnEV.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627443048&t=adaca6544da4ecbdf1b910379a7388fb",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi03.c.aliimg.com%2Fimg%2Fibank%2F2014%2F883%2F274%2F1511472388_1159440446.310x310.jpg&refer=http%3A%2F%2Fi03.c.aliimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627443048&t=f6b3ce846658dd25632f79a7be8c0c83",
      ],
      disabled: true,
      butttext: "请写下你的心愿",
      text: "",
      src: "",
      tapindex: -1,
      flag: true,
      dreams: [],
      xindex: -1,
      left: 0,
      top: 0,
    };
  },
  created() {
    this.dreams = JSON.parse(localStorage.getItem("xuyuan") || "[]");
  },
  methods: {
    // 选择图片
    srcinit(obj) {
      this.tapindex = obj.i;
      this.src = obj.src;
    },
    // 添加
    add(e) {
      if (this.flag) {
        if (this.dreams.length >= 6) {
          this.$loding.show({
            msg: "最多有六条心愿",
            src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
          });
          setTimeout(() => {
            this.$loding.hide();
          }, 1000);
          this.src = "";
          this.text = "";
          this.tapindex = -1;
          return;
        }
        // 获取视口宽高
        // console.log(document.documentElement.clientHeight);
        // console.log(document.documentElement.clientWidth);
        // 方法一
        // let left = Math.random() * document.documentElement.clientWidth;
        // let top = Math.random() * document.documentElement.clientHeight + 190;
        this.dreams.push({
          src: this.src,
          text: this.text,
          // left:
          //   left > document.documentElement.clientWidth - 100
          //     ? document.documentElement.clientWidth - 100
          //     : left,
          // top:
          //   top > document.documentElement.clientHeight - 90
          //     ? document.documentElement.clientHeight - 90
          //     : top,
          // 方法二
          top:
            Math.random() * (document.documentElement.clientHeight - 280) + 190,
          left: Math.random() * (document.documentElement.clientWidth - 100),
        });
      } else {
        this.dreams[this.xindex].src = this.src;
        this.dreams[this.xindex].text = this.text;
        this.flag = true;
      }
      this.src = "";
      this.text = "";
      this.tapindex = -1;
    },
    // 修改
    xgai(item, i) {
      this.src = item.src;
      this.text = item.text;
      this.disabled = false;
      this.xindex = i;
      this.flag = false;
    },
    // 删除
    del(i) {
      this.dreams.splice(i, 1);
    },
    // 手指抬起
    touchend(e) {},
    // 按下移动
    touchmove(i, e) {
      let left = e.targetTouches[0].pageX - this.left;
      let top = e.targetTouches[0].pageY - this.top;
      if (left <= 0) {
        left = 0;
      } else if (left >= document.documentElement.clientWidth - 100) {
        left = document.documentElement.clientWidth - 100;
      }
      if (top >= document.documentElement.clientHeight - 90) {
        top = document.documentElement.clientHeight - 90;
      } else if (top <= 190) {
        top = 190;
      }
      this.dreams[i].top = top;
      this.dreams[i].left = left;
    },
    // 手指按下
    touchstart(item, e) {
      this.left = e.targetTouches[0].pageX - e.target.offsetLeft;
      this.top = e.targetTouches[0].pageY - e.target.offsetTop;
    },
  },
  watch: {
    text(ontext) {
      if (ontext && this.src) {
        this.disabled = false;
        this.butttext = "发送心愿";
      } else {
        this.disabled = true;
      }
    },
    src(ontext) {
      if (ontext && this.text) {
        this.disabled = false;
        this.butttext = "发送心愿";
      } else {
        this.disabled = true;
      }
    },
    dreams: {
      deep: true,
      handler() {
        localStorage.setItem("xuyuan", JSON.stringify(this.dreams));
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.about {
  .plinput {
    margin: 10px 0;
  }
  .button {
    padding: 3px 6px;
    border: 1px solid purple;
    border-radius: 10px;
    display: block;
    margin: 10px auto;
    background: purple;
    color: #fff;
    &.color {
      background: #ccc;
      border: 1px solid #ccc;
      color: #fff;
    }
  }
  .box {
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100px;
    height: 90px;
    color: purple;
    background-repeat: no-repeat;
    span {
      padding: 3px 6px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>